<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8">

    <title>barsimple</title>
    <script type="text/javascript" src="{% static 'jquery-1.9.1.js' %}"/>
    <script></script>
    <script type="text/javascript" src="{% static 'echart/echarts.js' %}"/>
    <script></script>
    <script type="text/javascript">

        $(document).ready(function () {

            var bardata;
            $.ajax({
                    url:"{% url 'echart:barsimpledata' %}",
                    type:"GET",
                    dataType:"json",
                    success:function (data) {
                        console.log(data);
                        //debugger;
                        bardata = data;
                    },
                //模式是否为异步
                    async:false
            });
            //echarts 的显示设置
            option = {
                dataZoom: [
                    {   // 这个dataZoom组件，默认控制x轴。
                        type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件,滑动滑块
                        xAxisIndex: 0,
                        start: 0,      // 左边在 0% 的位置。
                        end: 100         // 右边在 100% 的位置。
                    },
                    {   // 这个dataZoom组件，也控制x轴。
                        type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件，滚动鼠标滚轮
                        xAxisIndex: 0,
                        start: 0,      // 左边在 0% 的位置。
                        end: 100         // 右边在 100% 的位置。
                    },
                    {
                        type: 'slider',
                        yAxisIndex: 0,
                        start: 0,
                        end: 100
                    },
                    {   // 这个dataZoom组件，也控制x轴。
                        type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件，滚动鼠标滚轮
                        yAxisIndex: 0,
                        start: 0,      // 左边在 0% 的位置。
                        end: 100         // 右边在 100% 的位置。
                    }
                ],
                visualMap: {
                    // 不显示 visualMap 组件，只用于明暗度的映射
                    show: true,
                    // 映射的最小值为 80
                    min: 10,
                    // 映射的最大值为 600
                    max: 500,
                    inRange: {
                        // 明暗度的范围是 0 到 1
                        colorLightness: [0.3, 0.7],
                        symbolSize: [30, 100]
                    }
                },
                backgroundColor: 'rgba(200,200,200,0.5)',
                textStyle: {
                    color: 'rgba(0, 255, 100, 0.7)',
                },
                title:{
                    show:true,
                    text:"{a|条形图实例}",
                    /*  text: 'subtextStyle.rich使用', */
                    subtext: '{a|名称：}{b|销量}',
                    left: 'left',
                    //backgroundColor:'rgba(255,255,255,0.3)',

                    textStyle: {
                        //富文本样式
                         rich: {
                             a: { //开头和结尾的文字样式
                                 color: 'rgba(100,100,200,0.5)',
                                 fontSize: 20,
                                 fontFamily:'微软雅黑',
                                 fontWeight:'bold',
                             }
                         }
                     },
                    subtextStyle: {
                         rich: {
                             a: { //开头和结尾的文字样式
                                 color: 'green',
                                 fontSize: 16
                             },
                             b: {
                                /*  backgroundColor: 'pink', */ //无法设置渐变色
                                 color: 'green',
                                 padding: [3, 8],
                                 fontSize: 14,
                                 fontWeight: 600,
                               /*   borderColor: '#0b4d9d',
                                 borderWidth: 1, */
                             }
                         }
                    }
                },
                legend: {
                    itemWidth:30,
                    formatter: '图例-{name}',
                    textStyle:{
                        fontSize:20,
                        color:'rgba(255,100,100,0.8)'
                    },
                    //data:bardata.legend,
                    data: [{
                        name: '销量',
                        // 强制设置图形为圆。
                        icon: 'circle',
                        // 设置文本为红色
                        textStyle: {
                            color: 'red'
                        }
                    }
                    /*
                    {
                        name: '示例',
                        // 强制设置图形为圆。
                        icon: 'circle',
                    }*/],
                    tooltip: {
                        show: true
                    }
                },
                tooltip: {},
                toolbox: {
                    show: true,
                    //设置了feature内容toolbox才会显示
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: {readOnly: false},
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        //图片下载名称
                        saveAsImage: {name:'销量'},
                    }
                },
                grid:{
                    show:true,
                    backgroundColor: 'rgba(10,10,100,0.5)',
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                    shadowBlur: 5,
                    shadowOffsetX:10,
                    shadowOffsetY:10,
                    tooltip:{
                        //trigger:'axis'
                        trigger:'item'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: bardata.dataAxis,
                    inverse:false,
                    axisLabel:{
                        inside:false,
                        //X周的坐标标签旋转90度（竖直显示）
                        fontFamily:'微软雅黑',
                        color:'#ff8015',
                        fontSize:16,
                        rotate:45
                    },
                    axisPointer:{
                        show:true,
                        //type:'shadow',
                        type:'line'
                    }
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: ['#aaa', '#ddd']
                        }
                    }
                },
                // 全局调色盘。
                //color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
                series: [{
                    name: '销量',
                    type: 'bar',
                    //type: 'line',
                    //type:'scatter',
                    //color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
                    data: bardata.data
                }]
            };

            var mychart=echarts.init(document.getElementById('simple_bar'),'light');
            console.log('echarts版本：'+echarts.version);
            mychart.showLoading('default',{
                text: 'loading......',
                color: '#c23531',
                textColor: '#000',
                maskColor: 'rgba(255, 255, 255, 0.8)',
                zlevel: 0
            });
            console.log('loding......');

            console.log(option);
            //异步任务
            setTimeout(()=>{
                mychart.hideLoading();
                mychart.setOption(option);
            },1000);

            mychart.on('click',function (params) {
                alert(params.name)
            })


        });
    </script>

</head>
<body>
<div id="simple_bar" style="width: 600px;height:400px;border: 1px solid lightgrey;"></div>

</body>

</html>
